﻿<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<title>表单组合 &middot; BootstrapVue</title>
<!-- Bootstrap 核心CSS -->
<link href="../../../v4/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 本文档额外专用css -->
<link href="../../../v4/assets/css/docsearch.min.css" rel="stylesheet">
<link href="../../../v4/assets/css/docs.min.css" rel="stylesheet">
<link href="../../style/bv_path.css" rel="stylesheet">

<!-- Favicons图标定义 -->
<link data-n-head="ssr" rel="manifest" href="../../manifest.json">
<link data-n-head="ssr" rel="shortcut icon" href="../../style/icons/icon_64.png">
<link data-n-head="ssr" rel="apple-touch-icon" href="../../style/icons/icon_512.png" sizes="512x512">

<!-- Meta关键字定义 -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container"> <span class="skiplink-text">跳到主体内容</span> </div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <a class="navbar-brand mr-0 mr-md-2" href="../" aria-label="Bootstrap">
  <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
    <title>Bootstrap</title>
    <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/>
    <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/>
  </svg>
  </a>
  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item"><a class="nav-link " href="../">首页</a></li>
      <li class="nav-item"><a class="nav-link" href="index.html">中文手册</a></li>
      <li class="nav-item"><a class="nav-link active" href="../components">组件</a></li>
      <li class="nav-item"><a class="nav-link " href="../directives">指令</a></li>
      <li class="nav-item"><a class="nav-link " href="../reference">参考</a></li>
      <li class="nav-item"><a class="nav-link " href="https://bootstrap-vue.org/play" target="_blank">体验</a></li>
      <li class="nav-item"><a class="nav-link " href="http://code.z01.com/v4"><i class="zi zi_bold" zico="粗"></i> Boostrap</a></li>
      <li class="nav-item"><a class="nav-link" href="http://ico.z01.com" target="_blank" rel="noopener">zico图标系统</a></li>
      <li class="nav-item"><a class="nav-link" href="http://www.z01.com" target="_blank" rel="noopener">Zoomla!逐浪CMS</a></li>
    </ul>
  </div>
  <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
    <li class="nav-item dropdown"> <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="alse"> v2.12.0 </a>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions"> 
        <a class="dropdown-item active" href="../../../bootstrap-vue/docs/4.0/">Latest (4.3.x)</a>
        <a class="dropdown-item" href="/Boot/">v3.3.7</a>
        <a class="dropdown-item" href="/Sass/">Sass语言</a>
        <a class="dropdown-item" href="/Emmet/">Emmet语法</a>
        <a class="dropdown-item" href="//www.z01.com/tool/" target="_blank">IIS站长工具</a>
        <a class="dropdown-item" href="//ad.z01.com/" target="_blank">广告源码</a>
        <a class="dropdown-item" href="//v.z01.com/mb/" target="_blank">免费模板</a>
        <a class="dropdown-item" href="//v.z01.com/" target="_blank">H5移动创作</a>
        <a class="dropdown-item" href="//www.z01.com/help/web/3234.shtml" target="_blank">Flexbox布局</a>
		<a class="dropdown-item" href="/boot/font.html" target="_blank">Font Awesome</a>
</div>
    </li>
    <li class="nav-item"> <a class="nav-link p-2" href="//zoomla.github.io/bootstrap4-zhcn-documentation" target="_blank" rel="noopener" aria-label="GitHub">
      <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false">
        <title>GitHub</title>
        <path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/>
      </svg>
      </a> </li>
    <li class="nav-item"> <a class="nav-link p-2" href="http://www.z01.com/blog/ren/3214.shtml" target="_blank" rel="noopener" aria-label="Slack">译者说</a></li>
  </ul>
  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="download.html">下载 Bootstrap</a> </header>

<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      <form class="bd-search d-flex align-items-center">
        <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
        <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false">
          <title>Menu</title>
          <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/>
        </svg>
        </button>
      </form>


<nav class="collapse bd-links" id="bd-docs-nav">
<div class=""><a href="../" class="bd-toc-link">首页</a></div>
<div class="bd-toc-item nuxt-link-exact-active "><a href="../../../bootstrap-vue/docs/" class="bd-toc-link  "> 起步 </a>
<ul class="nav bd-sidenav">
</ul>
</div>
<div class="bd-toc-item active"><a href="../../../bootstrap-vue/docs/components/" class="bd-toc-link nuxt-link-exact-active"> 组件 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/index.html" class="nav-link"> 组件目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/alert.html" class="nav-link"> 警告提示框(Alert) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 徽章(Badge) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 面包屑导航(Breadcrumb) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button.html" class="nav-link"> 按钮(Button) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-group.html" class="nav-link"> 按钮组(Button Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-toolbar.html" class="nav-link"> 按钮Toolbar(Button Toolbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/calendar.html" class="nav-link"> 日历组件(Calendar) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/card.html" class="nav-link"> 卡片(Card) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/carousel.html" class="nav-link"> 轮播效果(Carousel) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/collapse.html" class="nav-link"> 折叠面板(Collapse) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/dropdown.html" class="nav-link"> 下拉菜单(Dropdown) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/embed.html" class="nav-link"> 嵌入(Embed) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form.html" class="nav-link"> 表单(Form) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-checkbox.html" class="nav-link"> 表单复选框(Form Checkbox) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-datepicker.html" class="nav-link"> 表单时间选择器(Form Datepicker) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-file.html" class="nav-link"> 文件选择(Form File) </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/components/form-group.html" class="nav-link"> 表单组合(Form Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-input.html" class="nav-link"> 表单输入框(Form Input) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-radio.html" class="nav-link"> 单选择表单Form Radio </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-select.html" class="nav-link"> 下拉式表单(Form Select) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-spinbutton.html" class="nav-link"> 按钮式表单(Form Spinbuttno) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-tags.html" class="nav-link"> Tags表单选择器(Form Tags) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-textarea.html" class="nav-link"> 文本框(Form Textarea) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-timepicker.html" class="nav-link"> 表单内时间控件(Form Timepicker) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/image.html" class="nav-link"> 图片(Image) </a></li>

<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/input-group.html" class="nav-link"> 输入框(Input Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/jumbotron.html" class="nav-link"> Hero大块屏(Jumbotron) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/layout.html" class="nav-link"> 布局与网络Layout and Grid System </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/link.html" class="nav-link"> 链接(Link)</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/list-group.html" class="nav-link"> 列表组(List group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/media.html" class="nav-link"> 媒体(Media) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/modal.html" class="nav-link"> 弹出模态框(Modal) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/nav.html" class="nav-link"> 导航(Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/navbar.html" class="nav-link"> 导航栏(Navbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination.html" class="nav-link"> 分页(Pagination) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav.html" class="nav-link"> 分页导航(Pagination Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/popover.html" class="nav-link"> 指示备注(Popover) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/progress.html" class="nav-link"> 进度指示器(Progress) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/spinner.html" class="nav-link"> 旋转指示器(Spinner) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/table.html" class="nav-link"> 表格(Table) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tabs.html" class="nav-link"> 选项卡(Tabs) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/time.html" class="nav-link"> 时间组件(Time) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/toast.html" class="nav-link"> 冒泡推送(Toasts) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tooltip.html" class="nav-link"> tip提示组件(Tooltip) </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/directives/" class="bd-toc-link"> 指令 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/index.html" class="nav-link"> 指令目录 </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/directives/hover.html" class="nav-link"> Hover 指令<small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/popover.html" class="nav-link"> Popover 提示备注</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/scrollspy.html" class="nav-link"> Scrollspy 滚动监听</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/tooltip.html" class="nav-link"> Tooltip 提示指令</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/visible.html" class="nav-link"> Visible 可见性操作<small class="badge text-uppercase badge-success">New</small> </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/icons.html" class="bd-toc-link"> Icons图标</a>
<ul class="nav bd-sidenav">
</ul>
</div>
  
<div class="bd-toc-item"><a class="bd-toc-link" href="../../../bootstrap-vue/docs/reference">参考</a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference" class="nav-link.html"> 参考目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/accessibility.html" class="nav-link">友好访问</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/color-variants.html" class="nav-link">Color颜色变量 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/images.html" class="nav-link"> 组件图像img的src路径解析</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/router-links.html" class="nav-link"> Router路由支持 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/size-props.html" class="nav-link">大小规格</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/spacing-classes.html" class="nav-link">间距处理</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/starter-templates.html" class="nav-link">开始模板</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/theming.html" class="nav-link">主题色彩</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/utility-classes.html" class="nav-link">通用Class类</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/validation.html" class="nav-link">Form表单验证</a></li>
</ul>
</div>
<div class=""><a href="https://bootstrap-vue.org/play" class="bd-toc-link" target="_blank">在线模拟器</a></div>
</nav>
</div>

<div class="d-none d-xl-block col-xl-2 bd-toc">

<ul class="section-nav">
<li class="nav-item toc-entry mb-2"><a target="_self" href="#form-group" class="nav-link font-weight-bold"><span>表单组合(Form group)</span></a></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#label" class="nav-link"><span>标签</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#horizontal-layout" class="nav-link"><span>水平布局</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#label-size" class="nav-link"><span>标签尺寸</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#label-text-alignment" class="nav-link"><span>标签文字对齐</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#description" class="nav-link"><span>描述</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#nested-form-groups" class="nav-link"><span>嵌套表单组</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#disabled-form-group" class="nav-link"><span>禁用 form-group</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#validation-state-feedback" class="nav-link"><span>验证状态反馈</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#invalid-feedback" class="nav-link"><span>无效反馈</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#valid-feedback" class="nav-link"><span>有效反馈</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#feedback-style" class="nav-link"><span>反馈方式</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#feedback-limitations" class="nav-link"><span>反馈限制</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#accessibility" class="nav-link"><span>辅助功能</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#component-reference" class="nav-link"><span>组件引用</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-form-group" class="nav-link"><span>&lt;b-form-group&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-individual-components" class="nav-link"><span>导入单个组件</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-as-a-plugin" class="nav-link"><span>作为Vue.js插件导入</span></a></li>
</ul>
</li>
</ul>

</div>

<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">

<nav data-v-aafc4aea="" aria-label="Breadcrumbs" class="float-left mt-2 mb-0 mb-lg-2">
<ol data-v-aafc4aea="" class="breadcrumb d-inline-flex bg-transparent px-2 py-1 my-0">
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../" class="nuxt-link-active" target="_self">首页</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs" class="nuxt-link-active" target="_self">中文手册</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs/components/" class="nuxt-link-active" target="_self">组件</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item active"><span data-v-aafc4aea="" aria-current="location">表单组合</span></li>
</ol>
</nav>
<div class="clearfix d-block"></div>
  <h1 class="bd-title" id="content">表单组合(Form group)</h1>
<p class="bd-lead"><code translate="no" class="notranslate text-nowrap">&lt;b-form-group&gt;</code> 组件是向表单添加某些结构的最简单方法。 其目的是将表单控件与图例或标签配对，并提供帮助文本和无效/有效的反馈文本，以及可视（彩色）上下文状态反馈。</p>
  <script type="text/javascript" src="../../../v4/assets/js/pupCMS.js"></script>





<nav class="bd-quick-links mb-3 d-xl-none" data-v-811345e6="">
<header data-v-811345e6="">
<button data-v-811345e6="" type="button" class="btn font-weight-bold btn-outline-secondary btn-sm btn-block collapsed" aria-controls="bd-quick-links-collapse" aria-expanded="false"><span data-v-811345e6="">Show</span> page table of contents </button>
</header>
<ul data-v-811345e6="" id="bd-quick-links-collapse" class="collapse" style="display: none;">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#label" class=""><span data-v-811345e6="">Label</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#horizontal-layout" class=""><span data-v-811345e6="">Horizontal layout</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#label-size" class=""><span data-v-811345e6="">Label size</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#label-text-alignment" class=""><span data-v-811345e6="">Label text alignment</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#description" class=""><span data-v-811345e6="">Description</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#nested-form-groups" class=""><span data-v-811345e6="">Nested form groups</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#disabled-form-group" class=""><span data-v-811345e6="">Disabled form-group</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#validation-state-feedback" class=""><span data-v-811345e6="">Validation state feedback</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#invalid-feedback" class=""><span data-v-811345e6="">Invalid feedback</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#valid-feedback" class=""><span data-v-811345e6="">Valid feedback</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#feedback-style" class=""><span data-v-811345e6="">Feedback style</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#feedback-limitations" class=""><span data-v-811345e6="">Feedback limitations</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#accessibility" class=""><span data-v-811345e6="">Accessibility</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#component-reference" class=""><span data-v-811345e6="">Component reference</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-form-group" class=""><span data-v-811345e6="">&lt;b-form-group&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-individual-components" class=""><span data-v-811345e6="">Importing individual components</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-as-a-plugin" class=""><span data-v-811345e6="">Importing as a Vue.js plugin</span></a></li>
</ul>
</li>
</ul>
</nav>
<div translate="translate" class="bd-example vue-example vue-example-b-form-group notranslate">
<div>
<div id="fieldset-1" role="group" aria-invalid="true" class="form-group is-invalid">
<label id="fieldset-1__BV_label_" for="input-1" class="d-block">Enter your name</label>
<div class="bv-no-focus-ring">
<input id="input-1" type="text" aria-invalid="true" class="form-control is-invalid" aria-describedby="fieldset-1__BV_description_ fieldset-1__BV_feedback_invalid_">
<div tabindex="-1" id="fieldset-1__BV_feedback_invalid_" role="alert" aria-live="assertive" aria-atomic="true" class="invalid-feedback d-block">Please enter something</div>
<small tabindex="-1" id="fieldset-1__BV_description_" class="form-text text-muted">Let us know your name.</small></div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span>
      <span class="hljs-attr">id</span>=<span class="hljs-string">"fieldset-1"</span>
      <span class="hljs-attr">description</span>=<span class="hljs-string">"Let us know your name."</span>
      <span class="hljs-attr">label</span>=<span class="hljs-string">"Enter your name"</span>
      <span class="hljs-attr">label-for</span>=<span class="hljs-string">"input-1"</span>
      <span class="hljs-attr">:invalid-feedback</span>=<span class="hljs-string">"invalidFeedback"</span>
      <span class="hljs-attr">:valid-feedback</span>=<span class="hljs-string">"validFeedback"</span>
      <span class="hljs-attr">:state</span>=<span class="hljs-string">"state"</span>
    &gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-1"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"name"</span> <span class="hljs-attr">:state</span>=<span class="hljs-string">"state"</span> <span class="hljs-attr">trim</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-input</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    <span class="hljs-attr">computed</span>: {
      state() {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.name.length &gt;= <span class="hljs-number">4</span> ? <span class="hljs-literal">true</span> : <span class="hljs-literal">false</span>
      },
      invalidFeedback() {
        <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.name.length &gt; <span class="hljs-number">4</span>) {
          <span class="hljs-keyword">return</span> <span class="hljs-string">''</span>
        } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.name.length &gt; <span class="hljs-number">0</span>) {
          <span class="hljs-keyword">return</span> <span class="hljs-string">'Enter at least 4 characters'</span>
        } <span class="hljs-keyword">else</span> {
          <span class="hljs-keyword">return</span> <span class="hljs-string">'Please enter something'</span>
        }
      },
      validFeedback() {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.state === <span class="hljs-literal">true</span> ? <span class="hljs-string">'Thank you'</span> : <span class="hljs-string">''</span>
      }
    },
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">name</span>: <span class="hljs-string">''</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
<h2 id="label" class="bv-no-focus-ring"><span class="bd-content-title">标签<a class="anchorjs-link" href="#label" aria-labelledby="label"></a></span></h2>
<p>使用 <code translate="no" class="notranslate text-nowrap">label</code>【标签】属性设置生成的 <code translate="no" class="notranslate text-nowrap">&lt;legend&gt;</code> 或 <code translate="no" class="notranslate text-nowrap">&lt;label&gt;</code> 元素的内容，或者通过使用命名的 <code translate="no" class="notranslate text-nowrap">label</code> 插槽，您可以选择在视觉上隐藏标签文本，同时仍然通过仅设置 <code translate="no" class="notranslate text-nowrap">label-sr-only</code> 属性使其可用于屏幕阅读器。</p>
<p><code translate="no" class="notranslate text-nowrap">&lt;b-form-group&gt;</code> 将使用 <code translate="no" class="notranslate text-nowrap">&lt;legend&gt;</code> 呈现 <code translate="no" class="notranslate text-nowrap">&lt;fieldset&gt;</code> ，如果未设置 <code translate="no" class="notranslate text-nowrap">label-for</code> 属性。如果为 <code translate="no" class="notranslate text-nowrap">label-for</code> 属性提供了一个输入ID，那么将呈现一个带有 <code translate="no" class="notranslate text-nowrap">&lt;label&gt;</code> 的 <code translate="no" class="notranslate text-nowrap">&lt;div&gt;</code> 。</p>
<p>如果为 <code translate="no" class="notranslate text-nowrap">label-for</code> 属性提供输入 <code translate="no" class="notranslate text-nowrap">id</code> 值（该 <code translate="no" class="notranslate text-nowrap">id</code> 必须存在于 <code translate="no" class="notranslate text-nowrap">&lt;b-form-group&gt;</code> 中包含的输入中），则将呈现 <code translate="no" class="notranslate text-nowrap">&lt;label&gt;</code> 元素而不是 <code translate="no" class="notranslate text-nowrap">&lt;legend&gt;</code> 元素，并且 将 <code translate="no" class="notranslate text-nowrap">for</code> 属性设置为指定的 <code translate="no" class="notranslate text-nowrap">id</code> 。指定 id 时，<strong>请勿</strong> 在其前面加上 <code translate="no" class="notranslate text-nowrap">#</code> 。仅当在 <code translate="no" class="notranslate text-nowrap">&lt;b-form-group&gt;</code> 组件内有单个表单输入时，才应使用 <code translate="no" class="notranslate text-nowrap">label-for</code> 属性。使用 <code translate="no" class="notranslate text-nowrap">&lt;b-form-radio-group&gt;</code> ，<code translate="no" class="notranslate text-nowrap">&lt;b-form-checkbox-group&gt;</code> ，<code translate="no" class="notranslate text-nowrap">&lt;b-form-radio&gt;</code> ，<code translate="no" class="notranslate text-nowrap">&lt;b-form-checkbox&gt;</code> 或 <code translate="no" class="notranslate text-nowrap">&lt;b-form-file&gt;</code> 组件时，请勿设置 <code translate="no" class="notranslate text-nowrap">label-for</code> 属性（或将多个输入放置在同一表单组中），因为这些输入包括集成的标签元素，并且 <code translate="no" class="notranslate text-nowrap">&lt;legend&gt;</code> 元素更合适。</p>
<p>还可以通过 <code translate="no" class="notranslate text-nowrap">label-class</code> 属性将其他类应用于标签，例如响应填充和文本对齐实用程序类。<code translate="no" class="notranslate text-nowrap">label-class</code> 属性接受字符串或字符串数组。</p>
<h3 id="horizontal-layout" class="bv-no-focus-ring"><span class="bd-content-title">水平布局<a class="anchorjs-link" href="#horizontal-layout" aria-labelledby="horizontal-layout"></a></span></h3>
<p>默认情况下，标签显示在输入元素的上方，但是您可以选择在各种标准 Bootstrap 断点处渲染水平（标签在输入的左侧）。</p>
<p><code translate="no" class="notranslate text-nowrap">label-cols</code> 和 <code translate="no" class="notranslate text-nowrap">label-cols-{breakpoint}</code> 允许您指定标签应在行中占据多少列。输入将填充其余的行宽。该值必须是一个大于 <code translate="no" class="notranslate text-nowrap">0</code> 的数字。或者，您可以将属性设置为 <code translate="no" class="notranslate text-nowrap">true</code> ，以使标签和输入每个都占据呈现的行的宽度的一半（如果您的自定义 Bootstrap 的列数为奇数，则非常有用 ），或将值设置为 <code translate="no" class="notranslate text-nowrap">'auto'</code> ，以便标签仅占据所需的宽度。</p>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code translate="no" class="notranslate text-nowrap">label-cols</code></td>
<td>适用于断点 <code translate="no" class="notranslate text-nowrap">xs</code> 上</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">label-cols-sm</code></td>
<td>适用于断点 <code translate="no" class="notranslate text-nowrap">sm</code> 及以上</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">label-cols-md</code></td>
<td>适用于断点 <code translate="no" class="notranslate text-nowrap">md</code> 及以上</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">label-cols-lg</code></td>
<td>适用于断点 <code translate="no" class="notranslate text-nowrap">lg</code> 及以上</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">label-cols-xl</code></td>
<td>适用于断点 <code translate="no" class="notranslate text-nowrap">xl</code> 及以上</td>
</tr>
</tbody>
</table>
</div>
<div translate="translate" class="bd-example vue-example vue-example-b-form-group-horizontal notranslate">
<div>
<div>
<div id="fieldset-horizontal" role="group" class="form-row form-group">
<label id="fieldset-horizontal__BV_label_" for="input-horizontal" class="col-sm-4 col-lg-3 col-form-label">Enter your name</label>
<div class="bv-no-focus-ring col">
<input id="input-horizontal" type="text" class="form-control" aria-describedby="fieldset-horizontal__BV_description_">
<small tabindex="-1" id="fieldset-horizontal__BV_description_" class="form-text text-muted">Let us know your name.</small></div>
</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span>
      <span class="hljs-attr">id</span>=<span class="hljs-string">"fieldset-horizontal"</span>
      <span class="hljs-attr">label-cols-sm</span>=<span class="hljs-string">"4"</span>
      <span class="hljs-attr">label-cols-lg</span>=<span class="hljs-string">"3"</span>
      <span class="hljs-attr">description</span>=<span class="hljs-string">"Let us know your name."</span>
      <span class="hljs-attr">label</span>=<span class="hljs-string">"Enter your name"</span>
      <span class="hljs-attr">label-for</span>=<span class="hljs-string">"input-horizontal"</span>
    &gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-horizontal"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-input</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<p>在 BootstrapVue 版本 <samp class="notranslate" translate="no">2.1.0</samp> 中添加了将标签 cols 设置为 <code translate="no" class="notranslate text-nowrap">'auto'</code> 的功能。</p>
<h3 id="label-size" class="bv-no-focus-ring"><span class="bd-content-title">标签尺寸<a class="anchorjs-link" href="#label-size" aria-labelledby="label-size"></a></span></h3>
<p>您可以通过可选的 <code translate="no" class="notranslate text-nowrap">label-size</code> 属性控制标签文本的大小与表单输入的大小相匹配。小标签或大标签的值分别可以是 <code translate="no" class="notranslate text-nowrap">'sm'</code> 或 <code translate="no" class="notranslate text-nowrap">'lg'</code> 。大小适用于水平和非水平表单组。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-group-label-size notranslate">
<div>
<div role="group" class="form-row form-group" id="__BVID__4026">
<label for="input-sm" class="col-lg-2 col-4 col-form-label col-form-label-sm" id="__BVID__4026__BV_label_">Small</label>
<div class="bv-no-focus-ring col">
<input id="input-sm" type="text" class="form-control form-control-sm">
</div>
</div>
<div role="group" class="form-row form-group" id="__BVID__4028">
<label for="input-default" class="col-lg-2 col-4 col-form-label" id="__BVID__4028__BV_label_">Default</label>
<div class="bv-no-focus-ring col">
<input id="input-default" type="text" class="form-control">
</div>
</div>
<div role="group" class="form-row form-group" id="__BVID__4030">
<label for="input-lg" class="col-lg-2 col-4 col-form-label col-form-label-lg" id="__BVID__4030__BV_label_">Large</label>
<div class="bv-no-focus-ring col">
<input id="input-lg" type="text" class="form-control form-control-lg">
</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span> <span class="hljs-attr">label-cols</span>=<span class="hljs-string">"4"</span> <span class="hljs-attr">label-cols-lg</span>=<span class="hljs-string">"2"</span> <span class="hljs-attr">label-size</span>=<span class="hljs-string">"sm"</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"Small"</span> <span class="hljs-attr">label-for</span>=<span class="hljs-string">"input-sm"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-sm"</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-input</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span> <span class="hljs-attr">label-cols</span>=<span class="hljs-string">"4"</span> <span class="hljs-attr">label-cols-lg</span>=<span class="hljs-string">"2"</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"Default"</span> <span class="hljs-attr">label-for</span>=<span class="hljs-string">"input-default"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-default"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-input</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span> <span class="hljs-attr">label-cols</span>=<span class="hljs-string">"4"</span> <span class="hljs-attr">label-cols-lg</span>=<span class="hljs-string">"2"</span> <span class="hljs-attr">label-size</span>=<span class="hljs-string">"lg"</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"Large"</span> <span class="hljs-attr">label-for</span>=<span class="hljs-string">"input-lg"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-lg"</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"lg"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-input</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<h3 id="label-text-alignment" class="bv-no-focus-ring"><span class="bd-content-title">标签文字对齐<a class="anchorjs-link" href="#label-text-alignment" aria-labelledby="label-text-alignment"></a></span></h3>
<p>标签文本也可以通过 <code translate="no" class="notranslate text-nowrap">label-text-align</code> 属性和/或 <code translate="no" class="notranslate text-nowrap">label-align-{breakpoint}</code> 属性设置各自的值来选择 <code translate="no" class="notranslate text-nowrap">left</code> ，<code translate="no" class="notranslate text-nowrap">center</code> 或 <code translate="no" class="notranslate text-nowrap">right</code> 对齐。</p>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code translate="no" class="notranslate text-nowrap">label-align</code></td>
<td>适用于断点  <code translate="no" class="notranslate text-nowrap">xs</code> 上</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">label-align-sm</code></td>
<td>适用于断点 <code translate="no" class="notranslate text-nowrap">sm</code> 及以上</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">label-align-md</code></td>
<td>适用于断点 <code translate="no" class="notranslate text-nowrap">md</code> 及以上</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">label-align-lg</code></td>
<td>适用于断点 <code translate="no" class="notranslate text-nowrap">lg</code> 及以上</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">label-align-xl</code></td>
<td>适用于断点 <code translate="no" class="notranslate text-nowrap">xl</code> 及以上</td>
</tr>
</tbody>
</table>
</div>
<p>如果设置了 <code translate="no" class="notranslate text-nowrap">label-sr-only</code> 属性，则对齐方式无效。</p>
<h2 id="description" class="bv-no-focus-ring"><span class="bd-content-title">描述<a class="anchorjs-link" href="#description" aria-labelledby="description"></a></span></h2>
<p>可选的描述性文本，总是通过设置 <code translate="no" class="notranslate text-nowrap">description</code>【描述】属性或使用命名的 <code translate="no" class="notranslate text-nowrap">description</code>【描述】插槽与 <code translate="no" class="notranslate text-nowrap">.text-muted</code> 类一起显示。描述文本是使用 <a href="../../../bootstrap-vue/docs/components/form#helper-components" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-form-text&gt;</code></a> 表单子组件渲染的。</p>
<h2 id="nested-form-groups" class="bv-no-focus-ring"><span class="bd-content-title">嵌套表单组<a class="anchorjs-link" href="#nested-form-groups" aria-labelledby="nested-form-groups"></a></span></h2>
<p>随意嵌套 <code translate="no" class="notranslate text-nowrap">&lt;b-form-group&gt;</code> 组件，以生成高级表单布局和相关表单控件的语义分组：</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-group-nested notranslate">
<div>
<div class="card bg-light">
<div class="card-body">
<fieldset class="form-group mb-0" id="__BVID__4033" aria-labelledby="__BVID__4033__BV_label_">
<div class="form-row">
<legend tabindex="-1" class="col-lg-3 bv-no-focus-ring col-form-label col-form-label-lg font-weight-bold pt-0" id="__BVID__4033__BV_label_">Shipping Address</legend>
<div tabindex="-1" role="group" class="bv-no-focus-ring col">
<div role="group" class="form-row form-group" id="__BVID__4034">
<label for="nested-street" class="col-sm-3 col-form-label text-sm-right" id="__BVID__4034__BV_label_">Street:</label>
<div class="bv-no-focus-ring col">
<input id="nested-street" type="text" class="form-control">
</div>
</div>
<div role="group" class="form-row form-group" id="__BVID__4036">
<label for="nested-city" class="col-sm-3 col-form-label text-sm-right" id="__BVID__4036__BV_label_">City:</label>
<div class="bv-no-focus-ring col">
<input id="nested-city" type="text" class="form-control">
</div>
</div>
<div role="group" class="form-row form-group" id="__BVID__4038">
<label for="nested-state" class="col-sm-3 col-form-label text-sm-right" id="__BVID__4038__BV_label_">State:</label>
<div class="bv-no-focus-ring col">
<input id="nested-state" type="text" class="form-control">
</div>
</div>
<div role="group" class="form-row form-group" id="__BVID__4040">
<label for="nested-country" class="col-sm-3 col-form-label text-sm-right" id="__BVID__4040__BV_label_">Country:</label>
<div class="bv-no-focus-ring col">
<input id="nested-country" type="text" class="form-control">
</div>
</div>
<fieldset class="form-group mb-0" id="__BVID__4042" aria-labelledby="__BVID__4042__BV_label_">
<div class="form-row">
<legend tabindex="-1" class="col-sm-3 bv-no-focus-ring col-form-label text-sm-right" id="__BVID__4042__BV_label_">Ship via:</legend>
<div tabindex="-1" role="group" class="bv-no-focus-ring col">
<div role="radiogroup" tabindex="-1" class="pt-2 bv-no-focus-ring" id="__BVID__4043">
<div class="custom-control custom-control-inline custom-radio">
<input type="radio" autocomplete="off" class="custom-control-input" value="Air" id="__BVID__4043__BV_option_0_" name="__BVID__4043">
<label class="custom-control-label" for="__BVID__4043__BV_option_0_"><span>Air</span></label>
</div>
<div class="custom-control custom-control-inline custom-radio">
<input type="radio" autocomplete="off" class="custom-control-input" value="Courier" id="__BVID__4043__BV_option_1_" name="__BVID__4043">
<label class="custom-control-label" for="__BVID__4043__BV_option_1_"><span>Courier</span></label>
</div>
<div class="custom-control custom-control-inline custom-radio">
<input type="radio" autocomplete="off" class="custom-control-input" value="Mail" id="__BVID__4043__BV_option_2_" name="__BVID__4043">
<label class="custom-control-label" for="__BVID__4043__BV_option_2_"><span>Mail</span></label>
</div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
<figure class="highlight"><pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-card</span> <span class="hljs-attr">bg-variant</span>=<span class="hljs-string">"light"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span>
      <span class="hljs-attr">label-cols-lg</span>=<span class="hljs-string">"3"</span>
      <span class="hljs-attr">label</span>=<span class="hljs-string">"Shipping Address"</span>
      <span class="hljs-attr">label-size</span>=<span class="hljs-string">"lg"</span>
      <span class="hljs-attr">label-class</span>=<span class="hljs-string">"font-weight-bold pt-0"</span>
      <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-0"</span>
    &gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span>
        <span class="hljs-attr">label-cols-sm</span>=<span class="hljs-string">"3"</span>
        <span class="hljs-attr">label</span>=<span class="hljs-string">"Street:"</span>
        <span class="hljs-attr">label-align-sm</span>=<span class="hljs-string">"right"</span>
        <span class="hljs-attr">label-for</span>=<span class="hljs-string">"nested-street"</span>
      &gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-form-input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"nested-street"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-input</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span>
        <span class="hljs-attr">label-cols-sm</span>=<span class="hljs-string">"3"</span>
        <span class="hljs-attr">label</span>=<span class="hljs-string">"City:"</span>
        <span class="hljs-attr">label-align-sm</span>=<span class="hljs-string">"right"</span>
        <span class="hljs-attr">label-for</span>=<span class="hljs-string">"nested-city"</span>
      &gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-form-input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"nested-city"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-input</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span>
        <span class="hljs-attr">label-cols-sm</span>=<span class="hljs-string">"3"</span>
        <span class="hljs-attr">label</span>=<span class="hljs-string">"State:"</span>
        <span class="hljs-attr">label-align-sm</span>=<span class="hljs-string">"right"</span>
        <span class="hljs-attr">label-for</span>=<span class="hljs-string">"nested-state"</span>
      &gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-form-input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"nested-state"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-input</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span>
        <span class="hljs-attr">label-cols-sm</span>=<span class="hljs-string">"3"</span>
        <span class="hljs-attr">label</span>=<span class="hljs-string">"Country:"</span>
        <span class="hljs-attr">label-align-sm</span>=<span class="hljs-string">"right"</span>
        <span class="hljs-attr">label-for</span>=<span class="hljs-string">"nested-country"</span>
      &gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-form-input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"nested-country"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-input</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>

      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span>
        <span class="hljs-attr">label-cols-sm</span>=<span class="hljs-string">"3"</span>
        <span class="hljs-attr">label</span>=<span class="hljs-string">"Ship via:"</span>
        <span class="hljs-attr">label-align-sm</span>=<span class="hljs-string">"right"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-0"</span>
      &gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-form-radio-group</span>
          <span class="hljs-attr">class</span>=<span class="hljs-string">"pt-2"</span>
          <span class="hljs-attr">:options</span>=<span class="hljs-string">"['Air', 'Courier', 'Mail']"</span>
        &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-radio-group</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-card</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
<h2 id="disabled-form-group" class="bv-no-focus-ring"><span class="bd-content-title">禁用 form-group<a class="anchorjs-link" href="#disabled-form-group" aria-labelledby="disabled-form-group"></a></span></h2>
<p>设置 <code translate="no" class="notranslate text-nowrap">disabled</code> 属性将禁用渲染的 <code translate="no" class="notranslate text-nowrap">&lt;fieldset&gt;</code> ，并且在大多数浏览器中，将禁用该fieldset中包含的所有输入元素。</p>
<p>设置 <code translate="no" class="notranslate text-nowrap">label-for</code> 时，<code translate="no" class="notranslate text-nowrap">disabled</code> 无效（因为未呈现 <code translate="no" class="notranslate text-nowrap">&lt;fieldset&gt;</code> 元素）。</p>
<h2 id="validation-state-feedback" class="bv-no-focus-ring"><span class="bd-content-title">验证状态反馈<a class="anchorjs-link" href="#validation-state-feedback" aria-labelledby="validation-state-feedback"></a></span></h2>
<p>Bootstrap包括大多数表单控件上 <code translate="no" class="notranslate text-nowrap">valid</code>【有效】和 <code translate="no" class="notranslate text-nowrap">invalid</code>【无效】状态的验证样式。</p>
<p>一般来说，您需要针对特定类型的反馈使用特定状态：</p>
<ul>
<li><code translate="no" class="notranslate text-nowrap">false</code> （表示无效状态）非常适合存在阻塞或必填字段的情况。用户必须正确填写此字段才能提交表单。</li>
<li><code translate="no" class="notranslate text-nowrap">true</code> （表示有效状态）非常适合在整个表单中都进行逐字段验证并希望鼓励用户遍历其余字段的情况。</li>
<li><code translate="no" class="notranslate text-nowrap">null</code> 不显示验证状态（既不有效也不无效）</li>
</ul>
<p>要在 <code translate="no" class="notranslate text-nowrap">&lt;b-form-group&gt;</code> 上应用上下文状态图标之一，请将 <code translate="no" class="notranslate text-nowrap">state</code> 属性设置为 <code translate="no" class="notranslate text-nowrap">false</code>（对于无效），<code translate="no" class="notranslate text-nowrap">true</code>（对于有效）或 <code translate="no" class="notranslate text-nowrap">null</code>（无验证状态）。</p>
<p>Bootstrap v4使用 <code translate="no" class="notranslate text-nowrap">:invalid</code> 或 <code translate="no" class="notranslate text-nowrap">:valid</code> 输入的同级 CSS 选择器来显示反馈文本。一些表单控件（例如复选框，单选框和文件输入，或输入组内部的输入）被包装在其他标记中，这些标记将不再使反馈文本成为输入的同级，因此将不会显示反馈。 在这些情况下，您将需要在 <code translate="no" class="notranslate text-nowrap">&lt;b-form-group&gt;</code> <em>以及</em> 输入上设置有效性 <code translate="no" class="notranslate text-nowrap">state</code>【状态】。</p>
<p>如果父 <code translate="no" class="notranslate text-nowrap">&lt;b-form&gt;</code> 组件 <em>没</em> 有 <code translate="no" class="notranslate text-nowrap">novalidate</code> 属性（或将其设置为 <code translate="no" class="notranslate text-nowrap">false</code> ）以及 <code translate="no" class="notranslate text-nowrap">validated</code> 属性（输入失败或通过原生浏览器验证约束，如 <code translate="no" class="notranslate text-nowrap">required</code>），将显示反馈。有关验证方法的详细信息，请参阅 Bootstrap v4 的 <a href="http://getbootstrap.com/docs/4.0/components/forms/#validation" target="_blank" rel="noopener">Form component</a>【表单组件】文档。</p>
<p>您应该始终通过 <code translate="no" class="notranslate text-nowrap">invalid-feedback</code>【无效反馈】属性（或插槽）提供内容，以帮助用户在设置上下文 <code translate="no" class="notranslate text-nowrap">invalid</code>【无效】状态时使用辅助技术。</p>
<h3 id="invalid-feedback" class="bv-no-focus-ring"><span class="bd-content-title">无效反馈<a class="anchorjs-link" href="#invalid-feedback" aria-labelledby="invalid-feedback"></a></span></h3>
<p>显示可选的无效状态反馈文本，以通过设置 <code translate="no" class="notranslate text-nowrap">invalid-feedback</code> 属性或使用命名的 <code translate="no" class="notranslate text-nowrap">invalid-feedback</code> 插槽提供文本状态反馈（支持html）。</p>
<p>使用 <a href="../../../bootstrap-vue/docs/components/form#helper-components" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-form-invalid-feedback&gt;</code></a> 表单子组件呈现了无效的反馈。</p>
<h3 id="valid-feedback" class="bv-no-focus-ring"><span class="bd-content-title">有效反馈<a class="anchorjs-link" href="#valid-feedback" aria-labelledby="valid-feedback"></a></span></h3>
<p>显示可选的有效状态反馈文本，以通过设置 <code translate="no" class="notranslate text-nowrap">valid-feedback</code>【有效反馈】或使用命名的插槽 <code translate="no" class="notranslate text-nowrap">valid-feedback</code>【有效反馈】来提供文本状态反馈（支持html）。</p>
<p>有效反馈使用 <a href="../../../bootstrap-vue/docs/components/form#helper-components" class="font-weight-bold"><code translate="no" class="notranslate text-nowrap">&lt;b-form-valid-feedback&gt;</code></a> 表单子组件呈现。</p>
<h3 id="feedback-style" class="bv-no-focus-ring"><span class="bd-content-title">反馈方式<a class="anchorjs-link" href="#feedback-style" aria-labelledby="feedback-style"></a></span></h3>
<p>默认情况下，可见时，反馈（有效或无效）将显示为文本块。您可以通过将 <code translate="no" class="notranslate text-nowrap">tooltip</code>【工具提示】属性设置为 <code translate="no" class="notranslate text-nowrap">true</code> 来更改反馈，使其在可见时显示为静态工具提示。</p>
<h3 id="feedback-limitations" class="bv-no-focus-ring"><span class="bd-content-title">反馈限制<a class="anchorjs-link" href="#feedback-limitations" aria-labelledby="feedback-limitations"></a></span></h3>
<p><strong>注意：</strong> 使用 <code translate="no" class="notranslate text-nowrap">&lt;b-input-group&gt;</code> ，<code translate="no" class="notranslate text-nowrap">&lt;b-form-file&gt;</code> ，<code translate="no" class="notranslate text-nowrap">&lt;b-form-radio-group&gt;</code> ，<code translate="no" class="notranslate text-nowrap">&lt;b-form-radio&gt;</code> ，<code translate="no" class="notranslate text-nowrap">&lt;b-form-checkbox-group&gt;</code> 或 <code translate="no" class="notranslate text-nowrap">&lt;b-form-checkbox&gt;</code> 中的 <code translate="no" class="notranslate text-nowrap">&lt;b-form-group&gt;</code> ，仅在 <code translate="no" class="notranslate text-nowrap">input</code> 上设置无效（或有效）<code translate="no" class="notranslate text-nowrap">state</code> <strong>不会</strong>  触发显示无效（或有效）反馈（由于新的 Bootstrap v4 验证 CSS 的限制））。要解决此问题，<strong>您还必须</strong> 在 <code translate="no" class="notranslate text-nowrap">&lt;b-form-group&gt;</code> 上设置无效/有效 <code translate="no" class="notranslate text-nowrap">state</code>【状态】。使用上述表单控件之一时，本机浏览器验证 <strong>不会</strong> 触发显示无效反馈。</p>
<h2 id="accessibility" class="bv-no-focus-ring"><span class="bd-content-title">辅助功能<a class="anchorjs-link" href="#accessibility" aria-labelledby="accessibility"></a></span></h2>
<p>要启用 <code translate="no" class="notranslate text-nowrap">aria-*</code> 属性的自动生成，应为 <code translate="no" class="notranslate text-nowrap">&lt;b-form-group&gt;</code> 提供唯一的 <code translate="no" class="notranslate text-nowrap">id</code> 属性。 这会将帮助文本和反馈文本关联到 <code translate="no" class="notranslate text-nowrap">&lt;b-form-group&gt;</code> ，并间接关联到其输入控件。</p>
<p>默认情况下，当未提供 <code translate="no" class="notranslate text-nowrap">label-for</code> 值时，<code translate="no" class="notranslate text-nowrap">&lt;b-form-group&gt;</code> 会将输入控件呈现在HTML <code translate="no" class="notranslate text-nowrap">&lt;fieldset&gt;</code> 元素内，标签内容置于 fieldset 的 <code translate="no" class="notranslate text-nowrap">&lt;legend&gt;</code> 元素内。通过此标记的性质，图例内容自动与包含的输入控件相关联。</p>
<p><strong>强烈建议</strong> 您在 <code translate="no" class="notranslate text-nowrap">&lt;b-form-group&gt;</code> 中只有一个输入的情况下，在输入元素上提供唯一的 <code translate="no" class="notranslate text-nowrap">id</code> 属性，并为该ID设置 <code translate="no" class="notranslate text-nowrap">label-for</code> 属性。</p>
<p>当在 <code translate="no" class="notranslate text-nowrap">&lt;b-form-group&gt;</code> 内放置多个表单控件（即一系列或单选或复选框输入，或一系列相关输入）时，<strong>请勿设置</strong> <code translate="no" class="notranslate text-nowrap">label-for</code> 属性，因为标签只能与 单输入。最好使用默认的呈现标记，该标记产生一个 <code translate="no" class="notranslate text-nowrap">&lt;fieldset&gt;</code> + <code translate="no" class="notranslate text-nowrap">&lt;legend&gt;</code> 来描述输入组。</p>
<p>当在 <code translate="no" class="notranslate text-nowrap">&lt;b-form-group&gt;</code> 内放置多个表单控件时（并且您不嵌套 <code translate="no" class="notranslate text-nowrap">&lt;b-form-group&gt;</code> 组件），建议为每个控件赋予其自己的关联 <code translate="no" class="notranslate text-nowrap">&lt;label&gt;</code>（可使用 （ <code translate="no" class="notranslate text-nowrap">.sr-only</code> 类），并将属性标签设置为 <code translate="no" class="notranslate text-nowrap">for</code>【关联】的输入控件的 <code translate="no" class="notranslate text-nowrap">id</code> 。或者，您可以在每个输入控件上设置 <code translate="no" class="notranslate text-nowrap">aria-label</code> 属性，而不使用 <code translate="no" class="notranslate text-nowrap">&lt;label&gt;</code> 。对于 <code translate="no" class="notranslate text-nowrap">&lt;b-form-radio&gt;</code> 和 <code translate="no" class="notranslate text-nowrap">&lt;b-form-checkbox&gt;</code>（或组版本），您不需要设置单个标签，因为这些类型的输入的呈现标记已经包含 <code translate="no" class="notranslate text-nowrap">&lt;label&gt;</code> 元素。</p>
<!-- Component reference added automatically from component package.json -->

<h2 id="component-reference" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title">组件引用<a href="../../../bootstrap-vue/docs/components/form-group#component-reference" class="anchorjs-link" aria-labelledby="component-reference" target="_self"></a></span></h2>
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-form-group" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-form-group&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form-group#comp-ref-b-form-group" class="anchorjs-link" aria-labelledby="comp-ref-b-form-group" target="_self"></a></span></h3>
</div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/form-group/form-group.js" class="btn btn-outline-secondary btn-sm"> 查看源代码 </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-form-group-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-group&gt;</code> 属性 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-form-group-slots"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-group&gt;</code> 插槽 </a></li>
</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-form-group-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form-group#comp-ref-b-form-group-props" class="anchorjs-link" aria-labelledby="comp-ref-b-form-group-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__3955">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none" class="b-table-sort-icon-left">属性<span class="sr-only"> (Click to sort Ascending)</span></th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="id" class="" id="__BVID__3955__row_id">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">id</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">用于在渲染的内容上设置“id”属性，并用作根据需要生成任何其他元素ID的基础</td>
</tr>
<tr role="row" data-pk="state" class="" id="__BVID__3955__row_state">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">state</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">控制反馈的验证状态。'true'强制显示有效反馈，'false'强制显示无效反馈，'null'不强制显示反馈</td>
</tr>
<tr role="row" data-pk="label" class="" id="__BVID__3955__row_label">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">放置在表单组的标签/图例中的文本</td>
</tr>
<tr role="row" data-pk="label-for" class="" id="__BVID__3955__row_label-for">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label-for</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">设置为表单组中单个表单控件的ID。如果组中有多个表单控件，则不要设置值。</td>
</tr>
<tr role="row" data-pk="label-size" class="" id="__BVID__3955__row_label-size">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label-size</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">设置标签的文本大小：“sm”，“md”（默认）或“lg”。 使用此道具可使标签尺寸与表格控件尺寸匹配</td>
</tr>
<tr role="row" data-pk="label-sr-only" class="" id="__BVID__3955__row_label-sr-only">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label-sr-only</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">可视地隐藏标签内容，但可让屏幕阅读器用户使用</td>
</tr>
<tr role="row" data-pk="label-cols" class="" id="__BVID__3955__row_label-cols">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label-cols</code></td>
<td aria-colindex="2" role="cell" class="">Number or String or Boolean</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">标签宽度 xs 屏幕及以上的列数</td>
</tr>
<tr role="row" data-pk="label-cols-sm" class="" id="__BVID__3955__row_label-cols-sm">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label-cols-sm</code></td>
<td aria-colindex="2" role="cell" class="">Number or String or Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">标签宽度 sm 屏幕及以上的列数</td>
</tr>
<tr role="row" data-pk="label-cols-md" class="" id="__BVID__3955__row_label-cols-md">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label-cols-md</code></td>
<td aria-colindex="2" role="cell" class="">Number or String or Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">标签宽度 md 屏幕及以上的列数</td>
</tr>
<tr role="row" data-pk="label-cols-lg" class="" id="__BVID__3955__row_label-cols-lg">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label-cols-lg</code></td>
<td aria-colindex="2" role="cell" class="">Number or String or Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">标签宽度 lg 屏幕及以上的列数</td>
</tr>
<tr role="row" data-pk="label-cols-xl" class="" id="__BVID__3955__row_label-cols-xl">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label-cols-xl</code></td>
<td aria-colindex="2" role="cell" class="">Number or String or Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">标签宽度 xl 屏幕及以上的列数</td>
</tr>
<tr role="row" data-pk="label-align" class="" id="__BVID__3955__row_label-align">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label-align</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">标签 xs 屏幕和上方的文本对齐方式'left', 'center', 'right'</td>
</tr>
<tr role="row" data-pk="label-align-sm" class="" id="__BVID__3955__row_label-align-sm">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label-align-sm</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">标签 sm 屏幕和上方的文本对齐方式'left', 'center', 'right'</td>
</tr>
<tr role="row" data-pk="label-align-md" class="" id="__BVID__3955__row_label-align-md">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label-align-md</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">标签 md 屏幕和上方的文本对齐方式'left', 'center', 'right'</td>
</tr>
<tr role="row" data-pk="label-align-lg" class="" id="__BVID__3955__row_label-align-lg">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label-align-lg</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">标签 lg 屏幕和上方的文本对齐方式'left', 'center', 'right'</td>
</tr>
<tr role="row" data-pk="label-align-xl" class="" id="__BVID__3955__row_label-align-xl">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label-align-xl</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">标签 xl 屏幕和上方的文本对齐方式'left', 'center', 'right'</td>
</tr>
<tr role="row" data-pk="label-class" class="" id="__BVID__3955__row_label-class">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label-class</code></td>
<td aria-colindex="2" role="cell" class="">String or Array or Object</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">CSS类（或多个类）添加到 label / legend 元素</td>
</tr>
<tr role="row" data-pk="description" class="" id="__BVID__3955__row_description">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">description</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">放置在表单组的帮助文本区域中的文本</td>
</tr>
<tr role="row" data-pk="invalid-feedback" class="" id="__BVID__3955__row_invalid-feedback">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">invalid-feedback</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">表单组处于无效状态时显示的文本</td>
</tr>
<tr role="row" data-pk="valid-feedback" class="" id="__BVID__3955__row_valid-feedback">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">valid-feedback</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">在表单组处于有效状态时显示的文本</td>
</tr>
<tr role="row" data-pk="tooltip" class="" id="__BVID__3955__row_tooltip">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">tooltip</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">以基本的工具提示样式呈现反馈文本</td>
</tr>
<tr role="row" data-pk="feedback-aria-live" class="" id="__BVID__3955__row_feedback-aria-live">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">feedback-aria-live</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'assertive'</code></td>
<td aria-colindex="4" role="cell" class="">用于反馈文本上“aria-live”属性的值</td>
</tr>
<tr role="row" data-pk="validated" class="" id="__BVID__3955__row_validated">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">validated</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，在组件上添加 Bootstrap 验证触发器类 'was-validated'</td>
</tr>
<tr role="row" data-pk="disabled" class="" id="__BVID__3955__row_disabled">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">disabled</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">禁用 fieldset 元素，这又禁用了表单控件（在支持禁用的 fieldset 的浏览器上）。如果设置了 'label-for' ，则无效</td>
</tr>
</tbody>
</table>
</div>
</article>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-form-group-slots" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 插槽 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form-group#comp-ref-b-form-group-slots" class="anchorjs-link" aria-labelledby="comp-ref-b-form-group-slots" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped" id="__BVID__3989">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">插槽名称</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="label" class="" id="__BVID__3989__row_label">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">label</code></td>
<td aria-colindex="2" role="cell" class="">要放置在 &lt;label&gt; 元素内的内容。</td>
</tr>
<tr role="row" data-pk="description" class="" id="__BVID__3989__row_description">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">description</code></td>
<td aria-colindex="2" role="cell" class="">要放置在描述区域中的内容。</td>
</tr>
<tr role="row" data-pk="invalid-feedback" class="" id="__BVID__3989__row_invalid-feedback">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">invalid-feedback</code></td>
<td aria-colindex="2" role="cell" class="">要放置在无效反馈区域中的内容</td>
</tr>
<tr role="row" data-pk="valid-feedback" class="" id="__BVID__3989__row_valid-feedback">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">valid-feedback</code></td>
<td aria-colindex="2" role="cell" class="">要放置在有效反馈区域中的内容</td>
</tr>
</tbody>
</table>
</div>
</article>
<article class="bd-content">
<h3 id="importing-individual-components" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 导入单个组件 <a href="../../../bootstrap-vue/docs/components/form-group#importing-individual-components" class="anchorjs-link" aria-labelledby="importing-individual-components" target="_self"></a></span></h3>
<p> 您可以通过以下指定的导出将各个组件导入到您的项目中： </p>
<div class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__4002">
<thead role="rowgroup" class="thead-default">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">组件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">命名输出</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-form-group&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BFormGroup</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
</tbody>
</table>
</div>
<p><strong>示例：</strong></p>
<figure class="highlight"><pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { BFormGroup } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.component(<span class="hljs-string">'b-form-group'</span>, BFormGroup)</pre></figure>
</article>
<article class="bd-content">
<h3 id="importing-as-a-plugin" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 作为Vue.js插件导入 <a href="../../../bootstrap-vue/docs/components/form-group#importing-as-a-plugin" class="anchorjs-link" aria-labelledby="importing-as-a-plugin" target="_self"></a></span></h3>
<p> 这个插件包含了上面列出的所有组件。插件还包括任何组件别名。 </p>
<div class="table-responsive-sm">
<table fileds="namedExport,importPath" role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped b-table-caption-top" id="__BVID__4012">
<thead role="rowgroup" class="thead-default">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">命名输出</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">FormGroupPlugin</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
</tbody>
</table>
</div>
<p><strong>示例：</strong></p>
<figure class="highlight"><pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { FormGroupPlugin } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.use(FormGroupPlugin)</pre></figure>
</article>





















</main>
</div>
</div>


<script src="../../../v4/assets/js/vendor/jquery-slim.min.js"></script>
<script src="../../../v4/dist/js/popper.min.js"></script> 
<script src="../../../v4/dist/js/bootstrap.min.js"></script> 
<script src="../../../v4/assets/js/docs.min.js"></script> 
<script src="../../../v4/assets/js/ie-emulation-modes-warning.js"></script> 
<script src="../../../v4/assets/js/docsearch.min.js"></script> 
<script>
  docsearch({
    appId: 'PRR89ISST8',
    apiKey: '95044d57d4d7bb744f322d1f18ed607f',
    indexName: 'z01-bootstrapV4',
    inputSelector: '#search-input',
    handleSelected: function (input, event, suggestion) {
      var url = suggestion.url;
      url = suggestion.isLvl1 ? url.split('#')[0]: url;
      // If it's a title we remove the anchor so it does not jump.
      window.location.href = url;
    },
    transformData: function (hits) {
      return hits.map(function (hit) {
        hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
        return hit;
      });
    },
    debug: false // Set debug to true if you want to inspect the dropdown
  });
</script> 
<script>
  Holder.addTheme('gray', {
    bg: '#777',
    fg: 'rgba(255,255,255,.75)',
    font: 'Helvetica',
    fontweight: 'normal'
  });
</script>
</body>
</html>
